<template>
	<view class="order-detail">
		<view class="order-detail-banner">
			<view class="order-detail-banner__bg"></view>
			<view class="order-detail-banner__main">
				<view class="order-detail-banner__out">
					<view :class="['order-detail-banner__in',
					'state'+orderStatus]"></view>
				</view>
				<view class="order-detail-banner__step">
					<view class="order-detail-banner__item"
						v-for="(item,index) in stepsArr"
						:class="{'active':currentIndex == index}"
						:key="item.id">
						<text>{{item.title}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="order-detail-status">
			<!-- 待付款 -->
			<block v-if="orderStatus == 1">
				<view class="pay-status">
					<text class="pay-status__title">订单待支付</text>
					<view class="">
						<text class="pay-status__txt">请在</text>
						{{formatTime || '00时00分00秒'}}
						<text class="pay-status__txt">内完成支付，超时订单将自动取消</text>

					</view>
				</view>
				<view class="pay-btn"
					@click="handleShowQcode">
					<text>立即支付({{detailData.price / 10}}元)</text>
				</view>
			</block>
			<!-- 已付款 -->
			<!-- <block>
				<view class="pay-status">
					<text class="pay-status__title">正在为您安排服务专员...</text>
					<view class="">
						<text class="pay-status__txt">请保持手机畅通，稍后将有服务专员与您联系</text>
					</view>
				</view>
				<view class="pay-status">
					<text class="pay-status__title">服务进行中...</text>
					<view class="">
						<text class="pay-status__txt">已经安排服务专员，将于预约时间进行服务</text>
					</view>
				</view>
			</block>
			<block>
				<view class="pay-status">
					<text class="pay-status__title">服务已完成</text>
					<view class="">
						<text class="pay-status__txt">感谢您的使用，如有问题请联系客服</text>
					</view>
				</view>
			</block>
			 -->
			<block v-if="orderStatus == 40">
				<view class="pay-status">
					<text class="pay-status__title">订单已经取消</text>
					<view class="">
						<text class="pay-status__txt">期待下次为您服务，如需帮助可咨询客服</text>
					</view>
				</view>
			</block>
		</view>
		<view class="pay-detail">
			<view class="pay-detail__item"
				v-if="orderStatus == 30">
				<view class="pay-detail__item-title">
					本次服务专员
				</view>
				<view class="pay-detail__item-main">
					<view class="pay-detail__item-main-avatar">
						<image :src="detailData._staff?.avatar_url"
							mode=""></image>
					</view>
					<view class="pay-detail__item-main-name">
						<text>{{detailData._staff?.nickname}}</text>
					</view>
					<view class="pay-detail__item-main-mobile">
						<button size="mini"
							type="primary"
							@tap="handleShowMobile"
							:data-mobile="detailData._staff?.mobile">电话联系</button>
					</view>
				</view>
			</view>
			<view class="pay-detail__item">
				<view class="pay-detail__item-title">
					预约信息
				</view>
				<view class="pay-detail__item-main">
					<view class="pay-detail__item-main-subTilte">
						<text>预约服务</text>
					</view>
					<view class="pay-detail__item-main-desc">
						<text>{{detailData.service_name}}</text>
					</view>
				</view>
				<view class="pay-detail__item-main">
					<view class="pay-detail__item-main-subTilte">
						<text>收件人</text>
					</view>
					<view class="pay-detail__item-main-desc">
						<text>{{detailData.address?.username}}</text>
					</view>
				</view>
				<view class="pay-detail__item-main">
					<view class="pay-detail__item-main-subTilte">
						<text>收件人地址</text>
					</view>
					<view class="pay-detail__item-main-desc">
						<text>{{address}}</text>
					</view>
				</view>
				<view class="pay-detail__item-main">
					<view class="pay-detail__item-main-subTilte">
						<text>期望处理时间</text>
					</view>
					<view class="pay-detail__item-main-desc">
						<text>{{utils.formatTime(detailData.starttime,'YYYY-MM-DD HH:mm:ss')}}</text>
					</view>
				</view>

				<view class="pay-detail__item-main">
					<view class="pay-detail__item-main-subTilte">
						<text>所在医院</text>
					</view>
					<view class="pay-detail__item-main-desc">
						<text>{{detailData.hospital_name}}</text>
					</view>
				</view>
				<view class="pay-detail__item-main">
					<view class="pay-detail__item-main-subTilte">
						<text>其他需求</text>
					</view>
					<view class="pay-detail__item-main-desc">
						<text>{{detailData.demand}}</text>
					</view>
				</view>
			</view>
			<view class="pay-detail__item">
				<view class="pay-detail__item-title">
					订单信息
				</view>
				<view class="pay-detail__item-main">
					<view class="pay-detail__item-main-subTilte">
						<text>联系电话</text>
					</view>
					<view class="pay-detail__item-main-desc">
						<text>{{detailData._staff?.mobile}}</text>
					</view>
				</view>
				<view class="pay-detail__item-main">
					<view class="pay-detail__item-main-subTilte">
						<text>下单时间</text>
					</view>
					<view class="pay-detail__item-main-desc">
						<text>{{utils.formatTime(detailData.order_start_time,'YYYY-MM-DD HH:mm:ss')}}</text>
					</view>
				</view>
				<view class="pay-detail__item-main">
					<view class="pay-detail__item-main-subTilte">
						<text>应付金额</text>
					</view>
					<view class="pay-detail__item-main-desc">
						<text>{{detailData.price / 10}}元</text>
					</view>
				</view>
				<view class="pay-detail__item-main">
					<view class="pay-detail__item-main-subTilte">
						<text>实付金额</text>
					</view>
					<view class="pay-detail__item-main-desc">
						<text>{{detailData.paidPrice / 10}}元</text>
					</view>
				</view>

				<view class="pay-detail__item-main">
					<view class="pay-detail__item-main-subTilte">
						<text>付款时间</text>
					</view>
					<view class="pay-detail__item-main-desc">
						<text>{{detailData.paytime}}</text>
					</view>
				</view>
			</view>

		</view>
		<uni-popup ref="scanDialog"
			type="center"
			class="my-popup">
			<view class="pay-box">
				<view class="pay-box__txt">
					微信支付
				</view>
				<canvas id="qrcode"
					canvas-id="qrcode"
					style="width: 300rpx;height: 300rpx;"></canvas>
				<view class="pay-box__txt"
					@click="handleToOrderLists">
					请用本人的微信扫码付款
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		computed,
		onUnmounted,
		ref,
		toRaw
	} from 'vue';
	import {
		getOrderDetails
	} from '../../api'
	import {
		onLoad,
		onHide,
		onShow
	} from '@dcloudio/uni-app'
	import {
		useRemainTimeFormat
	} from '../../utils/formatTime'
	import utils from '../../utils'
	import UQRCode from 'uqrcodejs'
	const currentIndex = ref(0)

	const detailData = ref({})
	onLoad(async (options) => {
		const {
			orderid
		} = options
		const detailRetData = await getOrderDetails({
			oid: orderid
		})
		detailData.value = detailRetData.data


	})
	const stepsArr = ref([{

			title: '填写订单',
			id: 1
		}, {
			title: '在线支付',
			id: 2
		},
		{
			title: '专人服务',
			id: 3
		},
		{
			title: '服务完成',
			id: 4
		}
	])

	const orderStatus = computed(() => {
		const map = {
			"待支付": 10,
			"待服务": 20,
			"已完成": 30,
			"已取消": 40,
		}
		return map[detailData.value.trade_state]
	})

	const handleTimeover = () => {

	}

	const counterRef = ref(null)
	onHide(() => {
		console.log('onHide');
	})

	const {
		formatTime,
		clearTimeCount
	} = useRemainTimeFormat(detailData)



	onUnmounted(() => {
		console.log('onUnmounted');
		clearTimeCount()
	})

	onShow(() => {
		console.log('detail---onShow');
	})

	const scanDialog = ref(null)
	const createQCode = () => {
		// 获取uQRCode实例
		const qr = new UQRCode();
		// 设置二维码内容
		qr.data = detailData.value.code_url;
		// 设置二维码大小，必须与canvas设置的宽高一致
		qr.size = 150;
		// 调用制作二维码方法
		qr.make();
		// 获取canvas上下文
		const canvasContext = uni.createCanvasContext('qrcode'); // 如果是组件，this必须传入
		// 设置uQRCode实例的canvas上下文
		qr.canvasContext = canvasContext;
		// 调用绘制方法将二维码图案绘制到canvas上
		qr.drawCanvas();
	}

	const handleShowQcode = () => {
		createQCode()
		scanDialog.value.open()
	}

	const handleShowMobile = (e) => {
		const {
			mobile
		} = e.currentTarget.dataset
		uni.makePhoneCall({
			phoneNumber: mobile
		})
	}

	const address = computed(() => {
		if (!detailData.value.address) return ''
		const {
			cityName,
			countyName,
			detailInfo
		} = toRaw(detailData.value.address)
		return cityName + cityName + detailInfo
	})
</script>

<style lang="scss"
	scoped>
	.order-detail {
		&-banner {
			position: relative;

			&__bg {
				height: 240rpx;
				background: linear-gradient(to right, #007d65, #45b97c);
				position: absolute;
				top: 0;
				left: 0;
				right: 0;

			}

			&__main {
				position: relative;
				overflow: hidden;

				.order-detail-banner__out {
					width: 80%;
					margin: 60rpx auto 30rpx;
					height: 16px;
					background-color: #fff;
					border-radius: 10px;
					box-sizing: border-box;
					box-shadow: #007d65 2px 2px 10px;
					display: flex;
					padding: 2px;

					.order-detail-banner__in {
						border-radius: 10px;
						width: 0;
						background: linear-gradient(to right, #007d65, #45b97c);

						transition: width 1s ease-in-out;

						&.state1 {
							width: 50%;
						}

						&.state2 {
							width: 75%;
						}

						&.state3 {
							width: 100%;
						}

						&.state4 {
							width: 0%;
						}
					}
				}

				.order-detail-banner__step {
					width: 70%;
					margin: 60rpx auto 30rpx;
					display: flex;
					justify-content: space-between;

					.order-detail-banner__item {
						font-size: 24rpx;
						color: #ececec;

						&.active {
							color: #fff;
							font-weight: bold;
						}
					}
				}
			}
		}

		&-status {
			margin: 80rpx 20rpx 30rpx;

			.pay-status {
				&__title {
					font-weight: bold;

				}

				&__txt {
					font-size: 24rpx;
					color: #333;
				}
			}

			.pay-btn {
				width: 70%;
				height: 60rpx;
				background-color: #45b97c;
				color: #fff;
				text-align: center;
				margin: 40rpx auto 20rpx;
				line-height: 60rpx;
				padding: 10rpx 0;
				border-radius: 10rpx;
				font-weight: bold;
			}
		}

		.pay-detail {
			padding: 0 20rpx;

			&__item {
				margin: 20rpx 0;

				&-title {
					font-size: 28rpx;
					font-weight: bold;
					position: relative;
					padding-left: 20rpx;
					margin-bottom: 20rpx;

					&:before {
						position: absolute;
						left: 0;
						top: 0;
						bottom: 0;
						content: "";
						width: 6rpx;
						background-color: #007d65;
					}
				}

				&-main {
					display: flex;
					align-items: center;
					justify-content: space-between;
					gap: 20rpx;
					margin: 20rpx 0;

					&-avatar {

						image {
							width: 100rpx;
							height: 100rpx;
						}
					}

					&-name {
						font-size: 28rpx;
					}

					&-mobile {
						margin-left: auto;
					}

					&-subTilte,
					&-desc {
						font-size: 26rpx;
						color: #999;
					}

				}
			}
		}
	}

	.pay-box {
		background-color: #fff;
		padding: 20rpx;

		&__txt {
			text-align: center;
			margin: 10rpx 0;
			font-size: 26rpx;
		}
	}
</style>